<template>
    <div class="my-wbox my-statistics">
        <el-button type="primary" size="large" @click="onExport" class="my-statistics__btn" :disabled="loading">导出
        </el-button>
        <el-tabs v-model="activeName">
            <el-tab-pane :label="item.name" v-for="item in tabData" :name="item.id">
                <div v-loading="loading" class="my-loading" v-if="loading"></div>
                <h3 v-show="!loading" class="my-title01">{{ title }}</h3>
                <el-table :data="tableData" style="width: 100%" v-show="!loading" class="my-table" size="large">
                    <el-table-column :prop="item.prop" :label="item.label" v-for="item in columns" :width="item.width"
                        :align="item.align" :sortable="item.sortable" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'
import { getUserInfo } from '@/global/session'
import { useRouter } from 'vue-router'
import { FunTime } from '@/global/methods'
import http from '@/http/http'
import { ColumnTable } from '@/interface/index'
const router = useRouter()
let tableData = ref<any[]>([])//表格
let tabData = ref<any[]>([])//选项卡
let columns = ref<ColumnTable[]>([])
const time = FunTime('', 'YY-MM-DD-Zh')
let title = ref<string>('')
const loading = ref<boolean>(true)
const activeName = ref<number | string>(1)//选项卡变化
watch(
    () => activeName.value,
    () => {
        loading.value = true
        onPreview()//预览
    }
)

let userInfo = reactive({ roleId: '', townId: '', countryId: '', roleAuth: '', townName: '', countryName: '' })
userInfo = JSON.parse(getUserInfo() as string)
const townId = ref<string>('')//乡镇
const countryId = ref<string>('')//村组

//预览数据
const onPreview = () => {
    let url = ''//接口地址

    if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
        tabData.value = [
            {
                name: `本市举报报表统计`,
                id: 1
            },
        ]

        title.value = `截止${time}累积举报和回访统计表`
        columns.value = [
            { prop: 'sort', label: '序号', width: '60px', align: 'center' },
            { prop: 'townName', label: '乡镇(街道)', align: 'center' },
            { prop: 'dangerNum', label: '隐患总数', align: 'center', sortable: true },
            { prop: 'rectifiedNum', label: '已整改数量', align: 'center', sortable: true },
            { prop: 'rectifyNum', label: '待整改数量', align: 'center', sortable: true, },
            { prop: 'rectifyRate1', label: '整改率', align: 'center', sortable: true },
            { prop: 'visitTotalNum', label: '回访总数量', align: 'center', sortable: true },
            { prop: 'readyVisitNum', label: '待回访数量', align: 'center' },
            { prop: 'visitRate1', label: '回访率', align: 'center', sortable: true },
        ]
        url = '/manage/admin/report/viewMuniDangerTotal'

    } else {
        tabData.value = [
            {
                name: `本镇举报报表统计`,
                id: 1
            },
        ]
        title.value = `${userInfo.townName}（截止${time}）举报统计表`
        //当日统计表
        columns.value = [
            { prop: 'sort', label: '序号', width: '60px', align: 'center' },
            { prop: 'userName', label: '人员姓名', align: 'center' },
            { prop: 'rectifiedNum', label: '隐患整改数量', align: 'center', sortable: true },
            { prop: 'rectifyNum', label: '待整改数量', align: 'center', sortable: true },
            { prop: 'rectifyRate1', label: '整改率', align: 'center', sortable: true },
        ]
        url = '/manage/admin/report/viewTownDangerTotal'
    }

    loading.value = true
    onFunApi(url, 1)
}
//导出
const onExport = () => {
    let url = ''//接口地址
    if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
        //市
        url = '/manage/admin/report/exportMuniDangerTotal'
    } else if (userInfo.roleId == '4') {
        //镇
        url = '/manage/admin/report/exportTownDangerTotal'
    }

    loading.value = true
    onFunApi(url, 2)
}
const onFunApi = async (url: string, num: number) => {
    try {
        let res = await http.get(url)
        if (res?.code === 0 && res.data) {
            if (num === 1) {
                //预览接口之后的逻辑
                let [rectifiedNum, dangerNum, rectifyNum, visitTotalNum, readyVisitNum] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                res.data.forEach(v => {
                    rectifiedNum = rectifiedNum + Number(v.rectifiedNum)
                    rectifyNum = rectifyNum + Number(v.rectifyNum)
                    dangerNum = dangerNum + Number(v.dangerNum)
                    visitTotalNum = visitTotalNum + Number(v.visitTotalNum)
                    readyVisitNum = readyVisitNum + Number(v.readyVisitNum)
                });

                tableData.value = res.data
                if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
                    tableData.value.push({
                        sort: '汇总',
                        townName: '--',
                        dangerNum: dangerNum,
                        rectifiedNum: rectifiedNum,
                        rectifyNum: rectifyNum,
                        rectifyRate1: '--',
                        visitTotalNum: visitTotalNum,
                        readyVisitNum: readyVisitNum,
                        visitRate1: '--',
                    })

                } else {
                    tableData.value.push({
                        sort: '汇总',
                        rectifiedNum: rectifiedNum,
                        userName: '--',
                        rectifyRate1: '--',
                        rectifyNum: rectifyNum,
                    })

                }
            } else {
                //导出
                window.open(res.data)
            }
        }
        loading.value = false
    } catch {
        loading.value = false
    }
}
onPreview()//预览
</script>
<style scoped lang='scss'>
.my-statistics {
    position: relative;

    &__btn {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 9999;
    }

    :deep(.el-tabs__item) {
        height: 60px;
        line-height: 40px;
        font-size: 15px;
    }

    :deep(.el-tabs__item.is-active) {
        font-weight: bold;
    }
}

.my-loading {
    width: 100%;
    height: calc(100vh - 200px);
}

.my-table {
    width: 100%;
    border: 1px solid #ebeef5;

    :deep(th.el-table__cell) {
        background: #f2f2f2;
        color: #111;
    }
}

.my-title01 {
    text-align: center;
    margin-bottom: 10px;
}
</style>